<template>
	<view class="main" @click.stop>
		<view class="batch">
			<view class="title">
				<text>验收方式选择</text>
				<text>（注意增加验收动作可能产生仓内收费）</text>
			</view>
			<view class="batch_box">
				<checkbox-group class="batch_item" name="" v-for="(item, index) in batchList" :key="index">
					<label>
						<checkbox :checked="isSeled(item)" @click="change(item)" />
						<text>{{ item.batchName }}</text>
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="note">
			<view class="title">备注留言</view>
			<textarea class="note_item" v-model="locaNote" placeholder="输入备注留言" />
		</view>
		<view class="btn" @click="sureOrder">确定</view>
	</view>
</template>

<script>
export default {
	name: 'applyforOrder',
	props: {
		batchOrder: {
			type: Array,
			default: () => []
		},
		note: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			locaBatchOrder: [],
			locaNote: '',
			batchList: [
				{ id: '1', batchName: '编码批次', value: 'batchNo' },
				{ id: '2', batchName: '生产日期', value: 'productionDate' },
				{ id: '3', batchName: '一物一码', value: 'productionCode' },
				{ id: '4', batchName: '自定义', value: 'custom' }
			]
		};
	},
	created() {
		this.locaNote = this.note;
		this.locaBatchOrder = this.batchOrder;
	},
	methods: {
		isSeled(batch) {
			console.log('11', JSON.stringify(batch));
			console.log('22', JSON.stringify(this.batchOrder));
			const index = this.batchOrder.findIndex((item) => item.id === batch.id);
			console.log(index);
			if (index === -1) {
				return false;
			} else {
				return true;
			}
		},
		change(batch) {
			const index = this.locaBatchOrder.findIndex((item) => item.id === batch.id);
			if (index === -1) {
				this.locaBatchOrder.push(batch);
			} else {
				// 找到了元素，从数组中删除
				this.locaBatchOrder.splice(index, 1);
			}
		},
		sureOrder() {
			console.log('334455', this.locaNote, JSON.stringify(this.locaBatchOrder));
			this.$emit('sureOrder', JSON.stringify({ note: this.locaNote, batchOrder: this.locaBatchOrder }));
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 50rpx;
	right: 0;
	z-index: 99;
	padding: 20rpx 20rpx;
	min-width: 400rpx;
	border-radius: 10rpx;
	background-color: #f5f5f5;
	box-shadow: 0 2rpx 4rpx -1rpx rgba(0, 0, 0, 0.1);
}
.title {
	display: block;
	width: 100%;
	height: 50rpx;
	color: #666;
	margin-top: 30rpx;
	margin-bottom: 20rpx;
}
.batch {
	display: flex;
	width: 100%;
	flex-direction: column;
	background-color: white;
}
.batch_box {
	display: flex;
	width: 100%;
}
.batch_item {
	width: 200rpx;
	padding: 10rpx 20rpx;
}
.note {
}
.note_item {
	background-color: white;
	width: 95%;
	padding: 10rpx 20rpx;
}
.btn {
	height: 60rpx;
	width: 120rpx;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #e7e7e7;
	margin-left: auto;
	margin-right: 0;
	margin-top: 20rpx;
	background-color: #55aaff;
}
</style>
